<template>
  <div class="project-container">
    <!-- header logo -->
    <div class="header-wrapper flex justify-between">
      <img v-holder="{ img: '200x100', text: 'docs manager' }" />
      <ul class="links-container flex-1 flex justify-end align-center">
        <li>
          <router-link class="link-item" to="">团队管理</router-link>
        </li>
        <li>
          <router-link class="link-item" to="">反馈信息</router-link>
        </li>
        <li>
          <router-link class="link-item" to="">个人信息</router-link>
        </li>
        <li>
          <a class="link-item" href="javascript:void(0);" @click="logout">注销登录</a>
        </li>
      </ul>
    </div>

    <!-- 项目列表 -->
    <div class="projects-wrapper">
      <projectList />
    </div>
  </div>
</template>

<script>
import projectList from "./list.vue";
export default {
  name: "Projects",
  components: { projectList },
  methods: {
    // 注销登录
    logout() {
      this.$store.commit("user/logout");
      this.$router.push({ name: "home" });
    },
  },
};
</script>

<style lang="scss" scoped>
.project-container {
  width: 1000px;
  overflow-x: hidden;
  margin: 0 auto;
  .header-wrapper {
    padding: 0 10px;
    .links-container {
      li {
        height: 100%;
        .link-item {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          color: $primary;
          margin: 0 10px;
          height: 100%;
          text-decoration: none;
        }
      }
    }
  }
  .projects-wrapper {
    padding-top: 20px;
  }
}
</style>
